<template>
  <div class="plugin-config-index">
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" style="overflow: hidden">
      <el-tabs tab-position="left">
        <el-tab-pane :label="plugin.lang('tabs.0')">
          <div class="form">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.tax_type')" prop="tax_type">
                  <div style="width: 100%; overflow: hidden">
                    <el-select v-model="form.tax_type" style="width: 100%">
                      <el-option v-for="(value, key) in plugin.langTm('form.tax_type_text')" :value="key" :label="value" :key="key"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.order_goods_type')">
                  <div style="width: 100%; overflow: hidden">
                    <el-select v-model="form.orders.goods_type" style="width: 100%">
                      <el-option v-for="(value, key) in plugin.langTm('form.order_goods_type_text')" :value="key" :label="value" :key="key"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.order_code_type')" prop="orders.code_type">
                  <div style="width: 100%; overflow: hidden">
                    <el-select v-model="form.orders.code_type" style="width: 100%">
                      <el-option v-for="(value, key) in plugin.langTm('form.order_code_type_text')" :value="key" :label="value" :key="key"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.order_auto_print')" prop="orders.auto_print">
                  <div style="width: 100%; overflow: hidden">
                    <el-select v-model="form.orders.auto_print" style="width: 100%">
                      <el-option v-for="(value, key) in plugin.langTm('form.order_auto_print_text')" :value="key" :label="value" :key="key"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.order_checkout_every')" prop="orders.checkout_every">
                  <div style="width: 100%; overflow: hidden">
                    <el-select v-model="form.orders.checkout_every" style="width: 100%">
                      <el-option v-for="(value, key) in plugin.langTm('form.order_checkout_every_text')" :value="key" :label="value" :key="key"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.order_discount') + '(%)'" prop="orders.discount">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.orders.discount" :min="0" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.client_point')" prop="client_point">
                  <el-input v-model="form.client_point">
                    <template #suffix>
                      <span style="padding-right: 5px">=1</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.print_norm')" prop="print_norm">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.print_norm" :min="0" :precision="2" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="plugin.lang('form.order_remarks')">
                  <el-select
                    v-model="form.orders.remarks"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('tabs.1')">
          <div class="form">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.print_format')" prop="print_format">
                  <el-input v-model="form.print_format"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.print_code')" prop="print_code">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.print_code" :min="0" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.print_refund_format')" prop="print_refund_format">
                  <el-input v-model="form.print_refund_format"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.print_refund_code')" prop="print_refund_code">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.print_refund_code" :min="0" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.ticket_format')" prop="ticket_format">
                  <el-input v-model="form.ticket_format"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.ticket_code')" prop="ticket_code">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.ticket_code" :min="0" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.ticket_refund_format')" prop="ticket_refund_format">
                  <el-input v-model="form.ticket_refund_format"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.ticket_refund_code')" prop="ticket_refund_code">
                  <div style="width: 100%; overflow: hidden; text-align:left">
                    <el-input-number v-model="form.ticket_refund_code" :min="0" style="width: 100%" controls-position="right" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('tabs.2')">
          <div class="form">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.voucher_format')" prop="voucher_format">
                  <el-input v-model="form.voucher_format"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.voucher.pay')" prop="voucher.pay">
                  <el-input v-model="form.voucher.pay"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('tabs.3')">
          <div class="form">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item :label="plugin.lang('form.level_password')" prop="level_password">
                  <div style="width: 100%; display: flex; justify-content:space-between">
                    <Password ref="passwordRef" @over="value => form.level_password = value" />
                    <el-button v-if="form.level_password" type="primary" @click="() => { form.level_password = ''; passwordRef.empty()}" style="margin-left: 20px" plain>
                      {{ plugin.lang('form.level_password_empty') }}
                    </el-button>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="update">
      <el-button type="primary" size="large" :loading="loading" @click="onUpdate" style="width:100%">{{ plugin.lang('update') }}</el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import app from '@/app'
import model from '../model'
import Password from '@/components/password'

export default {
  components: {
    Password
  },
  setup() {
    // 获取配置
    model.get()

    // 表单
    const form = model.data
    const formRef = ref(null)
    const passwordRef = ref()
    
    // 验证
    const rules = {
      tax_type: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'orders.code_type': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'orders.discount': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'orders.auto_print': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'orders.checkout_every': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      print_norm: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      print_format: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      print_code: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      print_refund_format: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      print_refund_code: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      ticket_format: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      ticket_code: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      ticket_refund_format: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      ticket_refund_code: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      client_point: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      voucher_format:[
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'voucher.pay': [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          model.update().finally(() => {
            loading.value = false
          })
        }
      })
    }

    return {
      plugin: app.plugin.index,
      formRef,
      form,
      rules,
      loading,
      passwordRef,
      onUpdate
    }
  }
}
</script>